// Based on: https://github.com/angular/angular/blob/15a825c113701583773fa028259518b63760c3b4/devtools/styles.scss

@use 'sass:map';
@use 'external/npm/node_modules/@angular/material/index' as mat;

// Normalize as it's expected by Angular:
// https://github.com/angular/components/issues/12133
@import 'normalize';

$_palettes: (
  primary: (
    0: #000000,
    10: #001e31,
    20: #00317b,
    25: #003f9c,
    30: #004cbe,
    35: #0052ce,
    40: #0064ff,
    50: #0077ff,
    60: #008cff,
    70: #009cff,
    80: #87d0ff,
    90: #b9e1ff,
    95: #e7f2ff,
    98: #f7f9ff,
    99: #fcfcff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #171a2c,
    20: #2c2f42,
    25: #373a4d,
    30: #434659,
    35: #4e5165,
    40: #5a5d72,
    50: #73768b,
    60: #8d8fa6,
    70: #a7aac1,
    80: #c3c5dd,
    90: #dfe1f9,
    95: #f0efff,
    98: #fbf8ff,
    99: #fefbff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #00201c,
    20: #003731,
    25: #00443c,
    30: #005048,
    35: #005d53,
    40: #01796b,
    50: #008678,
    60: #00a392,
    70: #2dbfad,
    80: #54dbc8,
    90: #74f8e4,
    95: #b4fff1,
    98: #e5fff8,
    99: #f2fffb,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    10: #1b1b1f,
    20: #303034,
    25: #3b3b3f,
    30: #47464a,
    35: #535256,
    40: #5f5e62,
    50: #78767a,
    60: #919094,
    70: #acaaaf,
    80: #c8c6ca,
    90: #e4e1e6,
    95: #f3f0f4,
    98: #fbf8fd,
    99: #fefbff,
    100: #ffffff,
    4: #0e0e11,
    6: #131316,
    12: #1f1f23,
    17: #2a2a2d,
    22: #353438,
    24: #39393c,
    87: #dcd9de,
    92: #eae7ec,
    94: #f0edf1,
    96: #f5f2f7,
  ),
  neutral-variant: (
    0: #000000,
    10: #1a1b23,
    20: #2f3038,
    25: #3a3b43,
    30: #46464f,
    35: #51525b,
    40: #5d5e67,
    50: #767680,
    60: #90909a,
    70: #abaab4,
    80: #c6c5d0,
    90: #e3e1ec,
    95: #f1effa,
    98: #fbf8ff,
    99: #fefbff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
);

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes, neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$primary: $_primary;
$tertiary: $_tertiary;
// Use "sys" instead of "mat-sys" because
// "sys" used to be the default and is still used
// in downstream angular.
// https://github.com/angular/components/pull/29908
$system_variables_prefix: sys;

@function create-theme($density: 0) {
  @return mat.define-theme(
    (
      color: (
        theme-type: light,
        primary: $_primary,
        tertiary: $_tertiary,
        use-system-variables: true,
        system-variables-prefix: $system_variables_prefix,
      ),
      density: (
        scale: $density,
      ),
    )
  );
}

$light-theme: create-theme();
$dark-theme: mat.define-theme(
  (
    color: (
      theme-type: dark,
      primary: $_primary,
      tertiary: $_tertiary,
      use-system-variables: true,
      system-variables-prefix: $system_variables_prefix,
    ),
  )
);

@include mat.all-component-typographies();
@include mat.core();

body {
  @include mat.all-component-themes($light-theme);
  @include mat.color-variants-backwards-compatibility($light-theme);
  @include mat.system-level-colors($light-theme);
}

body.dark-theme {
  @include mat.system-level-colors($dark-theme);
}

$density-scales: (-1, -2, -3, -4);
@each $scale in $density-scales {
  .theme-density-#{$scale} {
    $density-theme: create-theme(
      $density: $scale,
    );
    @include mat.all-component-densities($density-theme);
  }
}

html,
body {
  --default-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol';
  padding: 0;
  margin: 0;
  height: 100%;
  // Use system font.
  font-family: var(--default-font-family);
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

// Need these as global styles since markdown HTML is not rendered through Angular.
.error-box-markdown * {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (pointer: fine) {
  @supports not (selector(::-webkit-scrollbar)) {
    * {
      scrollbar-color: #dadce0 transparent;
      scrollbar-gutter: auto;
      scrollbar-width: thin;
    }
  }

  ::-webkit-scrollbar,
  ::-webkit-scrollbar-corner {
    background: transparent;
    height: 12px;
    width: 12px;
  }

  ::-webkit-scrollbar-thumb {
    background: content-box currentColor;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #dadce0;
    min-height: 48px;
    min-width: 48px;
  }

  :hover::-webkit-scrollbar-thumb {
    color: #80868b;
  }

  ::-webkit-scrollbar-thumb:active {
    color: #5f6368;
  }

  ::-webkit-scrollbar-button {
    height: 0;
    width: 0;
  }
}

// The box component has div-like semantics, so make it `display: block` by default.
// We use a high-level selector first since this will allow custom CSS selectors
// to override this style more easily, specifically for flex and grid displays.
component-renderer,
component-renderer-element {
  display: block;
}

// Custom elements like Angular component tags are treated as inline by default.
//
// Since component-renderer encompasses many different types of a components, we
// need to add a more specific selector to make these inline by default.
component-renderer:not([mesop-box]),
component-renderer-element:not([mesop-box]),
// The first component-renderer object is a box, but it needs to be inline.
mat-sidenav-content > component-renderer:first-child {
  display: inline;
}

// We need to add custom mat-accordion styles since the expansion panels are wrapped
// by component-renderer which messes up some of the built-in Angular Material styles
// for the accordion.
.mat-accordion {
  component-renderer .mat-expansion-panel:first-of-type,
  component-renderer .mat-expansion-panel:last-of-type {
    border-radius: 0;
  }

  component-renderer:first-of-type .mat-expansion-panel {
    border-top-right-radius: var(--mat-expansion-container-shape);
    border-top-left-radius: var(--mat-expansion-container-shape);
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  component-renderer:last-of-type .mat-expansion-panel {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: var(--mat-expansion-container-shape);
    border-bottom-left-radius: var(--mat-expansion-container-shape);
  }

  component-renderer:first-of-type .mat-expansion-panel.mat-expanded {
    margin-top: 0;
    border-radius: var(--mat-expansion-container-shape);
  }

  component-renderer:last-of-type .mat-expansion-panel.mat-expanded {
    margin-bottom: 0;
    border-radius: var(--mat-expansion-container-shape);
  }

  component-renderer .mat-expansion-panel.mat-expanded {
    margin: 16px 0;
    border-radius: var(--mat-expansion-container-shape);
  }
}

mesop-markdown {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 400;
  }

  a {
    color: var(--sys-primary);
  }

  p {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.5;
    margin-bottom: 1.5;
    font-weight: 400;
  }

  a:visited {
    color: var(--sys-secondary);
  }

  // Make it so wide code examples do not overflow. Instead show a horizontal scrollbar.
  pre {
    margin: 0;
    overflow-x: scroll;
  }

  .code-block {
    border-radius: 8px;
    background: var(--sys-surface-container-low);
    overflow: hidden;
    min-height: 57px; // The copy button gets cut off if there's only one line of text.
    padding: 10px;
    position: relative;
  }

  .code-block a.code-copy {
    display: none;
  }

  .code-block:hover a.code-copy {
    border: none;
    border-radius: 50%;
    display: inline-block;
    color: var(--sys-on-surface);
    height: 40px;
    position: absolute;
    text-align: center;
    right: 10px;
    width: 40px;
  }

  .code-block:hover a.code-copy span {
    margin-top: 8px;
  }

  .code-block:hover a.code-copy:hover {
    background: var(--sys-surface-container-highest);
    cursor: pointer;
  }

  .code-block:hover a.code-copy:active {
    background: transparent;
    cursor: pointer;
  }

  // Add some basic style to the table mark up.
  table,
  th,
  td {
    border: 1px var(--sys-on-surface) solid;
    border-collapse: collapse;
    padding: 10px;
  }
}

/*
Modified from: https://github.com/highlightjs/highlight.js/blob/main/src/styles/xcode.css

XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>

*/

.hljs {
  background: transparent;
  color: black;
}

/* Gray DOCTYPE selectors like WebKit */
.xml .hljs-meta {
  color: #c0c0c0;
}

.hljs-comment,
.hljs-quote {
  color: #007400;
}

.hljs-tag,
.hljs-attribute,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-name {
  color: #aa0d91;
}

.hljs-variable,
.hljs-template-variable {
  color: #3f6e74;
}

.hljs-code,
.hljs-string,
.hljs-meta .hljs-string {
  color: #c41a16;
}

.hljs-regexp,
.hljs-link {
  color: #0e0eff;
}

.hljs-title,
.hljs-symbol,
.hljs-bullet,
.hljs-number {
  color: #1c00cf;
}

.hljs-section,
.hljs-meta {
  color: #643820;
}

.hljs-title.class_,
.hljs-class .hljs-title,
.hljs-type,
.hljs-built_in,
.hljs-params {
  color: #5c2699;
}

.hljs-attr {
  color: #836c28;
}

.hljs-subst {
  color: #000;
}

.hljs-formula {
  background-color: #eee;
  font-style: italic;
}

.hljs-addition {
  background-color: #baeeba;
}

.hljs-deletion {
  background-color: #ffc8bd;
}

.hljs-selector-id,
.hljs-selector-class {
  color: #9b703f;
}

.hljs-doctag,
.hljs-strong {
  font-weight: bold;
}

.hljs-emphasis {
  font-style: italic;
}

.dark-theme {
  /*!
  Modified from: https://github.com/highlightjs/highlight.js/blob/main/src/styles/github-dark-dimmed.css

  Theme: GitHub Dark Dimmed
  Description: Dark dimmed theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Colors taken from GitHub's CSS
*/

  .hljs {
    color: #adbac7;
    background: transparent;
  }

  .hljs-doctag,
  .hljs-keyword,
  .hljs-meta .hljs-keyword,
  .hljs-template-tag,
  .hljs-template-variable,
  .hljs-type,
  .hljs-variable.language_ {
    /* prettylights-syntax-keyword */
    color: #f47067;
  }

  .hljs-title,
  .hljs-title.class_,
  .hljs-title.class_.inherited__,
  .hljs-title.function_ {
    /* prettylights-syntax-entity */
    color: #dcbdfb;
  }

  .hljs-attr,
  .hljs-attribute,
  .hljs-literal,
  .hljs-meta,
  .hljs-number,
  .hljs-operator,
  .hljs-variable,
  .hljs-selector-attr,
  .hljs-selector-class,
  .hljs-selector-id {
    /* prettylights-syntax-constant */
    color: #6cb6ff;
  }

  .hljs-regexp,
  .hljs-string,
  .hljs-meta .hljs-string {
    /* prettylights-syntax-string */
    color: #96d0ff;
  }

  .hljs-built_in,
  .hljs-symbol {
    /* prettylights-syntax-variable */
    color: #f69d50;
  }

  .hljs-comment,
  .hljs-code,
  .hljs-formula {
    /* prettylights-syntax-comment */
    color: #768390;
  }

  .hljs-name,
  .hljs-quote,
  .hljs-selector-tag,
  .hljs-selector-pseudo {
    /* prettylights-syntax-entity-tag */
    color: #8ddb8c;
  }

  .hljs-subst {
    /* prettylights-syntax-storage-modifier-import */
    color: #adbac7;
  }

  .hljs-section {
    /* prettylights-syntax-markup-heading */
    color: #316dca;
    font-weight: bold;
  }

  .hljs-bullet {
    /* prettylights-syntax-markup-list */
    color: #eac55f;
  }

  .hljs-emphasis {
    /* prettylights-syntax-markup-italic */
    color: #adbac7;
    font-style: italic;
  }

  .hljs-strong {
    /* prettylights-syntax-markup-bold */
    color: #adbac7;
    font-weight: bold;
  }

  .hljs-addition {
    /* prettylights-syntax-markup-inserted */
    color: #b4f1b4;
    background-color: #1b4721;
  }

  .hljs-deletion {
    /* prettylights-syntax-markup-deleted */
    color: #ffd8d3;
    background-color: #78191b;
  }

  .hljs-char.escape_,
  .hljs-link,
  .hljs-params,
  .hljs-property,
  .hljs-punctuation,
  .hljs-tag {
    color: #6cb6ff;
  }
}
